<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="loading"></span>
<div>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <a class="navbar-brand">{{pageTitle}}</a>
      <ul class="nav navbar-nav">
        <li routerLinkActive="active">
          <a [routerLink]="['/welcome']">Home</a>
        </li>
        <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
          <a routerLink="/products">Product List</a>
        </li>
        <li routerLinkActive="active">
          <a [routerLink]="['/products', 0, 'edit']">Add Product</a>
        </li>
        <li routerLinkActive="active">
          <a routerLink="/customer-template-driven">Customer-Template-Driven</a>
        </li>
        <li routerLinkActive="active">
          <a routerLink="/customer-reactive">Customer-Reactive</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li *ngIf="authService.isLoggedIn()">
          <a>Welcome {{ authService.currentUser.userName }}</a>
        </li>
        <li *ngIf="!messageService.isDisplayed">
          <a (click)="displayMessages()">Show Messages</a>
        </li>
        <li *ngIf="messageService.isDisplayed">
          <a (click)="hideMessages()">Hide Messages</a>
        </li>
        <li *ngIf="!authService.isLoggedIn()">
          <a [routerLink]="['/login']">Log In</a>
        </li>
        <li *ngIf="authService.isLoggedIn()">
          <a (click)="logOut()">Log Out</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-10">
        <router-outlet></router-outlet>
      </div>
      <div class="col-md-2">
        <router-outlet name="popup"></router-outlet>
      </div>
    </div>
  </div>
</div>
